<template>
    <a-layout-header class="header">
        <a-flex justify="space-between" align="center">
            <router-link to="/">
                <img class="logo" src="@/assets/logo.svg" alt="">
            </router-link>

            <div class="header-search">
                <a-input-search v-model:value="searchValue" placeholder="输入关键字搜索" style="width: 500px"
                    @search="onSearch" />
            </div>

            <div class="header-right">
                <a-flex justify="start" align="center" style="padding-right: 24px;">
                    <a-flex justify="start" align="center" style="margin-right: 12px;" class="icons">
                        <!-- <a-tooltip title="会员">
                            <a-button size="large" type="text" shape="circle" :icon="h(SketchOutlined)" />
                        </a-tooltip> -->

                        <!-- <a-tooltip title="通知">
                            <a-button size="large" type="text" shape="circle" :icon="h(NotificationOutlined)" />
                        </a-tooltip> -->

                        <!-- <a-tooltip title="私信">
                            <a-button size="large" type="text" shape="circle" :icon="h(MessageOutlined)" />
                        </a-tooltip> -->

                        <a-tooltip title="投稿">
                            <a-button @click="router.push('/creative')" size="large" type="text" shape="circle" :icon="h(UploadOutlined)" />
                        </a-tooltip>
                    </a-flex>
                    <HeaderRightLogin></HeaderRightLogin>
                </a-flex>
            </div>
        </a-flex>
    </a-layout-header>
</template>
<script setup>

import { h,ref } from 'vue';
import { NotificationOutlined, MessageOutlined, UploadOutlined, SketchOutlined } from '@ant-design/icons-vue';
import HeaderRightLogin from '@/components/login/HeaderRightLogin.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const searchValue = ref('')


import { emitter } from '@/script/eventBus'
const onSearch = () => {
    router.push('/search?content=' + searchValue.value)
    emitter.emit('searchContentUpdated', searchValue.value)
}

</script>



<style scoped>
.header {
    background: white;
    padding-inline: 0;
    border-bottom: 1px solid rgba(5, 5, 5, 0.06);

    .logo {
        width: 100px;
        height: 35px;
        margin-left: 24px
    }

    .header-search {
        display: flex;
        align-items: center;
    }



}
</style>